<template>
	<!-- <view class="content">
		{{lst}}
	</view> -->
	<view class="home">
		<!-- usearchBar天加快捷键 -->
		<uni-search-bar @confirm="doSearch" @input="" v-model="searchkey"></uni-search-bar>

		<swiper indicator-active-color="#ff6700" indicator-color="#fff" style="height: 200px;" :indicator-dots="true"
			:autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in bannerGoodsList" :key="index">
				<view class="swiper-item">
					<image style="width: 100%;" :src="item.goods_big_logo" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 商品分类列表 -->
		<view class="oneList">
			<view class="item" v-for="(item,index) in oneList" :key="index">
				<view class="logo">
					<image :src="item.icon" mode=""></image>
				</view>
				<view class="name">
					{{item.name}}
				</view>
			</view>
		</view>

		<view class="log" style="color: #ff6700;padding-left: 25rpx;font-size: 20px;">精选商品</view>
		<!-- 精选商品列表 -->
		<view class="selected">
			<view class="item" v-for="(item,index) in selectedList" :key="index">
				<view class="pic">
					<image :src="item.goods_big_logo" mode=""></image>
				</view>
				<view class="name">
					{{item.name}}
				</view>
				<view class="info">
					<view class="price">
						￥{{item.price}}
					</view>
					<view class="tag">
						精选
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	// uni.request({
	// 	url:"https://unidemo.dcloud.net.cn/api/news",
	// 	method:'GET',
	// 	data:{}
	// }).then((res)=>{
	// 	console.log(res)
	// })

	// uni.request({
	// 	url:"https://unidemo.dcloud.net.cn/api/news",
	// 	method:'GET',
	// 	data:{},
	// 	success:function(res){
	// 		console.log(res)
	// 	}
	// })

	// function request(url, method = "GET", data = {}) {
	// 	// resolve成功
	// 	// reject失败
	// 	return new Promise((resolve, reject) => {
	// 		uni.request({
	// 			url,
	// 			method,
	// 			data,
	// 			success: (res) => {
	// 				resolve(res)
	// 			},
	// 			fail:(err) => {
	// 				reject(err)
	// 			}
	// 		})
	// 	})
	// }
	// request("https://unidemo.dcloud.net.cn/api/news").then(res=>{
	// 	console.log(res)
	// })

	// async function getnews(url){
	// 	let lst = await request(url)
	// 	console.log(lst)
	// }getnews("https://unidemo.dcloud.net.cn/api/news")


	// import { ref } from "vue"
	// 	let url="https://unidemo.dcloud.net.cn/api/news"
	// 	let lst=ref({})
	// 	async function getNews(){
	// 		lst.value=await uni.$get(url)
	// 		console.log(lst)
	// 	}
	// 	getNews()


	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	let bannerGoodsList = ref([])
	let searchkey = ref("")
	onLoad(() => {
		getBanner()
		getCateOneLst()
		getSelectedGoods()
	})

	function doSearch() {

		uni.showToast({
			icon: 'none',
			title: searchkey.value
		})
	}
	// 获取轮播图数据
	async function getBanner() {
		let res = await uni.$post("/goodsPromoteSelect", {
			"is_selected": 0,
			"is_promote": 1,
			"page": 1,
			"number": 5
		})
		bannerGoodsList.value = res.goodsList.map(item => {
			item.goods_big_logo = uni.$base_url + item.goods_big_logo
			return item
		})
		// console.log(bannerGoodsList.value)
	}

	// 获取商品类别level=0
	const oneList = ref([])
	async function getCateOneLst() {
		let res = await uni.$post("/categoryListLevel", {
			level: 0
		})
		if (res.code = 200) {
			console.log(res)
			oneList.value = res.result.map(item => {
				item.icon = uni.$base_url + item.icon
				return item
			})
			// console.log(oneList.value)
		}

	}

	// 显示精选商品
	const selectedList = ref([])
	async function getSelectedGoods() {
		let res = await uni.$post("/goodsPromoteSelect", {
			"is_selected": 0,
			"is_promote": 1,
			"page": 1,
			"number": 20
		})
		if (res.code == 200) {
			selectedList.value = res.goodsList.map(item => {
				item.goods_big_logo = uni.$base_url + item.goods_big_logo
				return item
			})
			console.log(selectedList.value)
		}
	}
</script>

<style>
	/* 类别容器 */
	.oneList {
		padding-top: 20rpx;
		display: flex;
		justify-content: space-around;
	}

	/* 图片容器 */
	.oneList>.item>.logo {
		width: 60rpx;
		height: 60rpx;
	}

	/* 图片 */
	.oneList>.item>.logo>image {
		width: 100%;
		height: 100%;
	}

	/* 类别文字 */
	.oneList>.item>.name {
		font-size: 24rpx;
	}

	/* 精选商品容器 */
	.selected {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}

	.selected>.item {
		width: 350rpx;
		border: 1ps solid #eee;
		box-shadow: 3px 3px 3px #eee;
		border-radius: 10px;
		margin-bottom: 5px;
	}

	.selected>.item>.pic {
		width: 320rpx;
		height: 320rpx;
		border: 1px solid #ccc;
		margin: 15rpx;
	}

	.selected>.item>.pic>image {
		width: 100%;
		height: 100%;
	}

	.selected>.item>.name {
		font-size: 26rpx;
		color: #666;
		/* 为view容器设置其中显示的文本超出2行就显示省略号。 */
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		padding: 0 15rpx 0 15rpx;
	}
	.selected>.item>.info{
		padding: 0 15rpx 15rpx 15rpx;
		display: flex;
		justify-content: space-between;
	}
	.selected>.item>.info>.price{
		color: #ff6700;
	}
	.selected>.item>.info>.tag{
		background-color: #ff6700;
		color: #fff;
		font-size: 24rpx;
		padding: 3px 5px;
		border-radius: 5px;
	}
	
</style>